<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item :label="$t('columns.clientName')" >
              <a-select name="clientId" v-model="queryParam.clientId" allowClear
                :placeholder="$t('common.form.rule.select', { label: $t('columns.clientName') })">
                <a-select-option v-for="(item, index)  in clientIds" :key="item.key" :value="item.value">
                  {{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('columns.name')" >
              <a-input allowClear v-model="queryParam.name" :placeholder="$t('common.form.rule.input', { label: $t('columns.name') })"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('columns.code')" >
              <a-input allowClear v-model="queryParam.code" :placeholder="$t('common.form.rule.input', { label: $t('columns.code') })"  ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('common.table.query') }}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload"
                style="margin-left: 8px">{{ $t('common.table.reset') }}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('common.table.add') }}</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('租车菜单')">{{ $t('common.table.export') }}</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
        @change="handleImportExcel">
        <a-button type="primary" icon="import">{{ $t('common.table.import') }}</a-button>
      </a-upload>
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal"
        @handleSuperQuery="handleSuperQuery"></j-super-query> -->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />{{ $t('common.table.delete') }}</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">{{ $t('common.table.batchActions') }}<a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>{{ $t('common.table.selected') }}<a
          style="font-weight: 600">{{ selectedRowKeys.length }}</a>{{ $t('common.table.item') }}
        <a style="margin-left: 24px" @click="onClearSelected">{{ $t('common.table.empty') }}</a>
      </div>

      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered :columns="columns" :dataSource="dataSource"
        :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
        @expandedRowsChange="handleExpandedRowsChange" @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">{{ $t('common.table.edit') }}</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">{{ $t('common.table.more') }} <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">{{ $t('common.table.detail') }}</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm :title="$t('common.table.confirmDelete')" @confirm="() => handleDelete(record.id)">
                  <a>{{ $t('common.table.delete') }}</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <menu-modal ref="modalForm" @ok="modalFormOk"></menu-modal>
  </a-card>
</template>

<i18n>
    {
      "zh-CN": {
        "columns": {
          "clientName": "客户端名称",
          "name": "菜单名称",
          "code": "菜单编号"
        }
      },
      "en-US": {
        "columns": {
          "clientName": "Client Name",
          "name": "Menu Name",
          "code": "Menu Number"
        }
      },
      "fr-FR": {
        "columns": {
          "clientName": "Nom du client",
          "name": "Nom du menu",
          "code": "Numéro du menu"
        }
      }
    }
  </i18n>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import MenuModal from './modules/MenuModal'
import { getAction } from '@/api/manage'

export default {
  name: 'AppMenuList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    MenuModal
  },
  data() {
    return {
      description: '应用菜单',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: this.$t('columns.clientName'),
          align: "center",
          dataIndex: 'clientName'
        },
        {
          title: this.$t('columns.name'),
          align: "center",
          dataIndex: 'name'
        },
        {
          title: this.$t('columns.code'),
          align: "center",
          dataIndex: 'code'
        },
        {
          title: this.$t('common.table.actions'),
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/app/menu/list",
        tree: "/app/menu/tree",
        delete: "/app/menu/delete",
        deleteBatch: "/app/menu/deleteBatch",
        exportXlsUrl: "/app/menu/exportXls",
        importExcelUrl: "/app/menu/importExcel",
        clientOptionUrl: "/app/client/options",
      },
      // 展开的行，受控属性
      expandedRowKeys: [],
      dictOptions: {},
      superFieldList: [],
      clientIds: [],
    }
  },
  created() {
    this.getClientOption();
    this.getSuperFieldList();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    getClientOption() {
      getAction(this.url.clientOptionUrl, {}).then((res) => {
        this.clientIds = res.result;
      }).finally(() => {
      })
    },
    loadData() {
      console.error("loadData----------:");
      this.dataSource = []
      getAction(this.url.tree, this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result.treeList;
        }
      })
    },
    searchQuery() {
      this.loadData();
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'name', text: this.$t('columns.name') })
      fieldList.push({ type: 'string', value: 'code', text: this.$t('columns.code') })
      this.superFieldList = fieldList
    },
    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>